<html>
<head>
<meta charset="utf-8" />
<script src="myscript.js"></script>
</head>
<body>
<hr />
<br />
<h1 id="h01"></h1><br /><br />
<h2 id="h02"></h2><br /><br />
<h3 id="h03"></h3><br /><br />
<hr />
<br />
<button type="button" onclick="getNavigatorInfo()">Show Navigator Info</button>
<br />
<hr />
<br />
<input type="button" onclick="message()" value="Show message"/>
<br />
<hr />
<br />
<input type="button" onclick="message2()" value="Show message2"/>
<br />
<br />
<script>
	document.write(returnValue());
</script>
<br />
<br />
<form>
<fieldset>
<legend>Warning:</legend>
类似上述script的情况，会在html加载时，寻找对应的方法，必须放在head部分，提前加载。否则会报错。<br />
如果js代码是由onclick触发时，可以考虑放置在文档底部，最后加载js。
</fieldset>
</form>
<br />
<br />
<input type="button" onclick="functionWithParam('Good Morning')" value="早"/>
<button type="button" onclick="functionWithParam('Good Night')">晚</button>
<br />
<hr />
<br />
<button type="button" onclick="disp_prompt()">Show Prompt frame</button><br />
<p id="sayHello"></p>
<br />
<br />
<button type="button" onclick="myfunction()">Click here</button>
<br />
<div>
<h2>A simple Form for Using Get</h2>
<form action="http://www.baidu.com" method="GET">
<fieldset>
<legend>Personal information:</legend>
First name:
<input type="text" name="firstName" value="Jack"/><br />
Last name:
<input type="text" name="lastName" value="David"/><br />
Age:
<input id="age" type="text" name="age" value="11a" /><br />
<input type="submit" value="submit" />
</fieldset>
</form>
</div>

<hr />
<!-- 此刻不显示图片：
<img border="0" src="/i/tulip_ballade.jpg" alt="Tulip">
-->
<br />
<table border="1">
<tr><th colspan="2">Col 1 &amp; 2 Heading</th><th>Col 3 Heading</th></tr>
<tr><td id="red">Row 1 Col 1</td><td rowspan="2">Row 1 Col 2</td><td>Row 1 Col 3</td></tr>
<tr><td>Row 2 Col 1</td>><td class="right">Row 2 Col 3</td></tr>
</table>

<hr />
<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>
<br />
<p id="changed">以下内容引用自 WWF 的网站：</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
五十年来，WWF 一直致力于保护自然界的未来。
世界领先的环保组织，WWF 工作于 100 个国家，
并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>
<br />
<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
<br />
<p><dfn title="World Health Organization">WHO</dfn> 成立于 1948 年。</p>
<br />
<address>
Written by Donald Duck.<br /> 
Visit us at:<br />
Example.com<br />
Box 564, Disneyland<br />
USA
</address>
<br />
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
<br />
<bdo dir="rtl">This text will be written from right to left</bdo>
<hr />
<b>粗体文本</b>
<br />
<big>大号字</big>
<br />
<em>着重文字</em>
<br />
<i>斜体</i>
<br />
<small>小号字</small>
<br />
<strong>加重语气字体</strong>
<br />
<sup>上标</sup>
<br />
<sub>下标</sub>
<br />
<ins>插入字</ins>
<br />
<del>删除字</del>
<hr />
<p style="background-color:green">style替换废弃的属性bgcolor</p>
<p style="font-family:arial;font-size:10px;text-align:center;color:blue;">style替换文本、大小、字体颜色、布局标签</p>
<hr />
<h1>这是h1</h1>
<h2>这是h2</h2>
<h3>这是h3</h3>
<h4>这是h4</h4>
<h5>这是h5</h5>
<h6>这是h6</h6>
<p>这是段落。</p>
<div>这是div</div>
<span>这是span</span>
<br />
<a href="http://www.baidu.com">这是百度超链接</a>

<!-- CSS & Javascript Here at the bottom of this doc.-->
<link rel="stylesheet" type="text/css" href="mystyles.css" />

<script src="jquery-3.1.1.min.js"></script>
<script src="prototype.js"></script>
<script type="text/javascript">
	//document.write("<h3>This is h3 with JS.</h3>");
	function myfunction(){
	var x=document.getElementById("age").value;
	if(x==""||isNaN(x)){
		alert("Not Numeric!");
	}
	//x=document.getElementById("red");
	//x.innerHTML="Changed by JS.";
	//x.style.color="#00ff00"; // change the style
	}
	
	function jQueryTest()
	{
		//$("#h01").html("Hello jQuery...");
		$("#h01").attr("style","color:red").html("Hello jQuery")
	}
	//$(document).ready(jQueryTest);
	
	function testHTMLDOM()
	{
		var obj=document.getElementById("h02");
		obj.innerHTML="Hello HTML DOM";
	}
	onload=testHTMLDOM;
	
	function testPrototype()
	{
		$("h03").insert("Hello Prototype!");
	}
	Event.observe(window,"load",testPrototype);
	
</script>
</body>
</html>